<template>
  <view class="detail-container">
    <!-- 用户基本信息卡片 -->
    <view class="card user-card">
      <view class="user-header">
        <image class="avatar" :src="userInfo.avatar || defaultAvatar" mode="aspectFill"></image>
        <view class="user-title">
          <text class="nickname">{{ userInfo.nickName }}</text>
          <text class="username">({{ userInfo.userName }})</text>
        </view>
      </view>

      <view class="info-list">
        <view class="info-item">
          <text class="label">所属部门</text>
          <text class="value">{{ userInfo.dept?.deptName || '暂无部门' }}</text>
        </view>
        <view class="info-item">
          <text class="label">手机号码</text>
          <text class="value">{{ userInfo.phonenumber || '暂无' }}</text>
        </view>
        <view class="info-item">
          <text class="label">邮箱地址</text>
          <text class="value">{{ userInfo.email || '暂无' }}</text>
        </view>
        <view class="info-item">
          <text class="label">用户状态</text>
          <text class="value" :class="userInfo.status === '0' ? 'text-success' : 'text-danger'">
            {{ userInfo.status === '0' ? '正常' : '停用' }}
          </text>
        </view>
        <view class="info-item">
          <text class="label">创建时间</text>
          <text class="value">{{ userInfo.createTime || '暂无' }}</text>
        </view>
        <view class="info-item">
          <text class="label">最后登录</text>
          <text class="value">{{ userInfo.loginDate || '暂无' }}</text>
        </view>
        <view class="info-item">
          <text class="label">登录IP</text>
          <text class="value">{{ userInfo.loginIp || '暂无' }}</text>
        </view>
      </view>
    </view>

    <!-- 角色信息卡片 -->
    <view class="card role-card">
      <view class="card-title">
        <uni-icons type="staff" size="18" color="#409eff"></uni-icons>
        <text>所属角色</text>
        <text class="role-count">({{ userInfo.roles?.length || 0 }}个)</text>
      </view>
      <view class="role-list">
        <view v-for="role in userInfo.roles" :key="role.roleId" class="role-item">
          <view class="role-header">
            <view class="role-tag" :class="{'admin-role': role.admin}">
              {{ role.admin ? '系统角色' : '普通角色' }}
            </view>
            <text class="role-name">{{ role.roleName }}</text>
          </view>
          <view class="role-content">
            <view class="role-info">
              <text class="label">角色标识：</text>
              <text class="value">{{ role.roleKey }}</text>
            </view>
            <view class="role-info">
              <text class="label">数据范围：</text>
              <text class="value">{{ getDataScope(role.dataScope) }}</text>
            </view>
            <view class="role-info" v-if="role.remark">
              <text class="label">角色描述：</text>
              <text class="value">{{ role.remark }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 岗位信息卡片 -->
    <view class="card post-card">
      <view class="card-title">
        <uni-icons type="flag" size="18" color="#409eff"></uni-icons>
        <text>所属岗位</text>
        <text class="post-count">({{ userInfo.posts?.length || 0 }}个)</text>
      </view>
      <view class="post-list">
        <view v-for="post in userInfo.posts" :key="post.postId" class="post-item">
          <view class="post-header">
            <text class="post-code">{{ post.postCode }}</text>
            <text class="post-name">{{ post.postName }}</text>
          </view>
          <view class="post-content">
            <view class="post-info">
              <text class="label">排序：</text>
              <text class="value">{{ post.postSort }}</text>
            </view>
            <view class="post-info">
              <text class="label">状态：</text>
              <text class="value" :class="post.status === '0' ? 'text-success' : 'text-danger'">
                {{ post.status === '0' ? '正常' : '停用' }}
              </text>
            </view>
            <view class="post-info" v-if="post.remark">
              <text class="label">备注：</text>
              <text class="value">{{ post.remark }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getUser } from '@/api/system/user'
import defaultAvatar from '@/static/images/profile.jpg'

export default {
  data() {
    return {
      userId: 0,
      userInfo: {},
      defaultAvatar
    }
  },
  onLoad(options) {
    if (options.userId) {
      this.userId = options.userId.toString()
      this.getUserDetail()
    }
  },
  methods: {
    async getUserDetail() {
      try {
        const res = await getUser(this.userId)
        if (res.code === 200) {
          this.userInfo = res.data.user || {}
          this.userInfo.roles = res.data.roles || []
          this.userInfo.posts = res.data.posts || []
        }
      } catch (error) {
        uni.showToast({
          title: '获取用户详情失败',
          icon: 'none'
        })
      }
    },
    // 获取数据范围描述
    getDataScope(scope) {
      const scopeMap = {
        '1': '全部数据权限',
        '2': '自定数据权限',
        '3': '本部门数据权限',
        '4': '本部门及以下数据权限',
        '5': '仅本人数据权限'
      }
      return scopeMap[scope] || '未知权限'
    }
  }
}
</script>

<style lang="scss">
.detail-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;

  .card {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  }

  .user-card {
    .user-header {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;

      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 60rpx;
        margin-right: 20rpx;
        border: 2rpx solid #eee;
      }

      .user-title {
        .nickname {
          font-size: 36rpx;
          font-weight: 500;
          color: #333;
        }

        .username {
          font-size: 28rpx;
          color: #666;
          margin-left: 10rpx;
        }
      }
    }

    .info-list {
      .info-item {
        display: flex;
        justify-content: space-between;
        padding: 20rpx 0;
        border-bottom: 2rpx solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        .label {
          color: #666;
          font-size: 28rpx;
        }

        .value {
          color: #333;
          font-size: 28rpx;

          &.text-success {
            color: #67c23a;
          }

          &.text-danger {
            color: #f56c6c;
          }
        }
      }
    }
  }

  .card-title {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #f0f0f0;

    text {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
      margin-left: 12rpx;
    }

    .role-count, .post-count {
      font-size: 24rpx;
      color: #999;
      font-weight: normal;
      margin-left: 8rpx;
    }
  }

  .role-list {
    .role-item {
      background-color: #f8f9fa;
      border-radius: 8rpx;
      padding: 24rpx;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .role-header {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        .role-tag {
          background-color: #e6f7ff;
          color: #1890ff;
          font-size: 22rpx;
          padding: 4rpx 12rpx;
          border-radius: 4rpx;
          margin-right: 12rpx;

          &.admin-role {
            background-color: #fff1f0;
            color: #ff4d4f;
          }
        }

        .role-name {
          font-size: 28rpx;
          font-weight: 500;
          color: #333;
        }
      }

      .role-content {
        .role-info {
          display: flex;
          margin-top: 12rpx;
          font-size: 26rpx;

          .label {
            color: #666;
            min-width: 140rpx;
          }

          .value {
            color: #333;
            flex: 1;
          }
        }
      }
    }
  }

  .post-list {
    .post-item {
      background-color: #f8f9fa;
      border-radius: 8rpx;
      padding: 24rpx;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .post-header {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        .post-code {
          background-color: #f0f7ff;
          color: #409eff;
          font-size: 24rpx;
          padding: 4rpx 12rpx;
          border-radius: 4rpx;
          margin-right: 12rpx;
        }

        .post-name {
          font-size: 28rpx;
          font-weight: 500;
          color: #333;
        }
      }

      .post-content {
        .post-info {
          display: flex;
          margin-top: 12rpx;
          font-size: 26rpx;

          .label {
            color: #666;
            min-width: 100rpx;
          }

          .value {
            color: #333;
            flex: 1;

            &.text-success {
              color: #67c23a;
            }

            &.text-danger {
              color: #f56c6c;
            }
          }
        }
      }
    }
  }
}
</style>